<template>
	<view class="view-root">
		<view class="search-panel">
			<view class="mall-search-box" @click="gotoRouter('/pages-mall/searchDrug/searchDrug')">
				<view class="search-box-layer">
					<image class="search-box-icon" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_jzy_search.png"></image>
					<view class="search-box-info">搜索药品名称</view>
				</view>
			</view>
			<view style="padding: 4rpx 16rpx; position: relative;" @click="gotoRouter('/pages-mall/medicineCart/medicineCart')">
				<image class="mall-search-infotm" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_medicine_list_cart.png"></image>
				<view v-if="cartCount > 0" class="cart-count">{{cartCount}}</view>
			</view>
		</view>
		<view class="list-wrap">
			<scroll-view class="index-wrap">
				<view v-for="(sort, index) in mSorts" :key="index" :class="index == selectSortIndex ? 'index-item-selected': 'index-item-normal'" @click="changeSort(index)">{{sort.typeName}}</view>
			</scroll-view>
			<view class="medicine-list-wrap">
				<view class="filter-wrap">
					<scroll-view class="filter-items-scroll" scroll-x="true">
						<view style="display: flex;flex-wrap: nowrap;">
							<view v-for="(filter, index) in mSorts[selectSortIndex].child" :key="index" :class="filter.selected ? 'filter-item-selected': 'filter-item-normal'" @click="checkFilter(filter)">{{filter.typeName}}</view>
						</view>
					</scroll-view>
					<!-- <view style="display: flex;width: 120rpx;height: 96rpx;align-items: center;justify-content: center;">
						<text>展开</text>
						<image style="width: 34rpx;height: 34rpx;" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_gray_fold_down.png"></image>
					</view> -->
				</view>
				<scroll-view class="medicines-scroll" scroll-y="true" @scrolltolower="loadMoreMedicine()">
					<view class="medicine-card" v-for="(medicine, index) in medicineList" :key="index" :data="medicine" @click="gotoRouter('/pages-mall/medicineDetail/medicineDetail?id=' + medicine.id)">
						<!-- <image :src="medicine.thumbnailUrl" style="width: 100rpx;height: 100rpx;" mode="heightFix"></image> -->
						<view class="medicine-pic-wrap">
							<image :src="medicine.thumbnailUrl" class="medicine-pic"></image>
							<view v-if="medicine.recipeFlag > 0" class="prescription-tag">处方药</view>
						</view>
						<view class="info-wrap">
							<view class="medicine-name">{{medicine.name}}</view>
							<view class="medicine-abstract">{{medicine.majorCure}}</view>
							<view class="price-line">
								<view class="current-price">￥{{medicine.salesPrice}}</view>
								<view class="old-price">￥{{medicine.originalPrice}}</view>
								<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_add_cart.png" @click.stop="addCart(medicine)"></image>
							</view>
						</view>
					</view>
					<view v-if="totalSize == medicineList.length" class="end-line">～我是有底线的呢～</view>
					<view style="height: 40rpx;"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mSorts: [],
				selectSortIndex: 0,
				filter: {},
				medicineList: [],
				totalSize: 0,
				currPage: 1,
				pageSize: 20,
				cartCount: 0,
				sortId: 0,
				childSortId: 0
			};
		},
		onLoad(options) {
			this.sortId = options.sortId;
			this.childSortId = options.childId;
			this.getMedicineSorts();	
		},
		
		onShow() {
			this.getCartCount();
		},
		
		methods: {
			getMedicineSorts() {
				this.$api.getMedicineSorts({}).then(res => {
					this.mSorts = res.result;
					if (this.sortId != 0) {
						this.mSorts.forEach((sort, index) => {
							if (sort.id == this.sortId) {
								this.selectSortIndex = index;
								if (sort.child != null && sort.child.length > 0 && this.childSortId > 0) {
									let childIndex = 0;
									sort.child.forEach((child, cIndex) => {
										if (child.id == this.childSortId) {
											childIndex = cIndex;
										}
									})
									this.changeSort(index, childIndex);
								} else {
									this.changeSort(index);
								}
							}
						})
					} else {
						this.changeSort(0);
					}
				})
			},
			changeSort(index, childIndex = 0) {
				this.mSorts[index].child.forEach((filter, pos) => {
					if (pos == childIndex) {
						this.checkFilter(filter);
					}
				})
				this.selectSortIndex = index;
			},
			checkFilter(filter) {
				this.filter.selected = false;
				filter.selected = true;
				this.filter = filter;
				this.querymedicineList();
			},
			//药品列表
			querymedicineList() {
				this.currPage = 1;
				this.$api
					.getMedicineList({
						params: {
							pageNo:this.currPage,
							pageSize: this.pageSize,
							assignedFirstType: this.mSorts[this.selectSortIndex].id,
							assignedSecondType: this.filter.id
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.medicineList = res.result.records;
							this.totalSize = res.result.total;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			},
			
			loadMoreMedicine() {
				if (this.totalSize > this.medicineList.length) {
					this.$api.getMedicineList({
						params: {
							pageNo: this.currPage + 1,
							pageSize: this.pageSize,
							assignedFirstType: this.mSorts[this.selectSortIndex].id,
							assignedSecondType: this.filter.id
						}
					}).then(res => {
						if (res.code == 200) {
							this.medicineList = this.medicineList.concat(res.result.records);
							this.totalSize = res.result.total;
							this.currPage = res.result.current;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}
			},
			
			getCartCount() {
				this.$api.getCartCount({}).then(res => {
					if (res.code == 200) {
						this.cartCount = res.result;
					} else {
						
					}
				})
			},
			
			addCart(medicine) {
				this.$api.addIntoCart({
					data: {
						commodityId: medicine.id,
						count: 1
					}
				}).then(res => {
					if (res.code == 200) {
						this.cartCount = this.cartCount + 1;
						uni.showToast({
							title:"加入购物车成功",
							icon:'success'
						})
					} else {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import './medicineList.less';
</style>
